<template>
    <div class="view-main">
        <div class="view-header">
            <el-radio-group v-model="timeSelect" @change="queryTimeChanged">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="今日"></el-radio-button>
                <el-radio-button label="本周"></el-radio-button>
                <el-radio-button label="本月"></el-radio-button>
                <el-radio-button label="自定义"></el-radio-button>
            </el-radio-group>
            <el-date-picker v-if="timeShow" v-model="timeRange" type="datetimerange" format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            align="right" @change="handleTimeRangeChanged">
            </el-date-picker>
            <el-input placeholder="案卷名称" v-model="queryParam.name" style="width: 200px"></el-input>
            <el-input placeholder="案卷编号" v-model="queryParam.code" style="width: 200px" ></el-input>

            <span>
        <el-button type="primary" @click="getDataList()" icon="el-icon-search">查询</el-button>
      </span>
        </div>
        <div class="view-body">
            <div class="light-table">
                <el-table :data="tableData" height="300" highlight-current-row style="width: 100%">
                    <el-table-column property="createTime" label="创建时间" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column property="name" label="案卷名称" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column property="code" label="案卷编号" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column property="department" label="办案部门" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column property="undertaker" label="承办人" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" align="center" width="330">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button type="text" class="danger-color" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]"
                               :total="total" :current-page="pageNum" :page-size.sync="pageSize" :page-count="pages"
                               @current-change="handlePageChange" @size-change="handleSizeChange"></el-pagination>
            </div>
        </div>
        <el-dialog class="no-bottom-padding user-dialog" :title="typeText" :visible.sync="dialogVisible" width="480px" :close-on-click-modal="false">
            <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px" size="mini" style="padding-right: 20px" :disabled="type_dia === 2">
                <el-form-item label="案件名称" prop="name">
                    <el-input v-model="addForm.name" clearable></el-input>
                </el-form-item>

                <el-form-item label="案卷编号" prop="code">
                    <el-input v-model.number="addForm.code" clearable></el-input>
                </el-form-item>

                <el-form-item label="办案类型" prop="type">
                    <el-select v-model="addForm.type" placeholder="请选择">
                        <el-option
                                v-for="item in types"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="原由" prop="reason">
                    <el-input v-model.number="addForm.reason" clearable></el-input>
                </el-form-item>

                <el-form-item label="承办人" prop="undertaker">
                    <el-select v-model="addForm.undertaker" placeholder="请选择">
                        <el-option
                                v-for="item in undertakers"
                                :key="item.realName"
                                :label="item.realName"
                                :value="item.realName">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="办案部门" prop="department">
                    <el-select v-model="addForm.department" placeholder="请选择">
                        <el-option
                                v-for="item in departments"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="案发时间"  prop="crimeTime">
                    <el-date-picker type="date"  v-model="addForm.crimeTime" style="width: 100%;"
                                    value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </el-form-item>

                <el-form-item label="案发地点"  prop="address">
                    <el-input v-model.number="addForm.address" clearable></el-input>
                </el-form-item>

                <el-form-item label="案发描述"  prop="description">
                    <el-input v-model.number="addForm.description" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="type_dia < 2">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateConfirm('addForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { isEmpty, formatDate, stringFormat,getStartTimeOfDate, getEndTimeOfDate, getStartTimeOfWeek, getEndTimeOfWeek, getStartTimeOfMonth, getEndTimeOfMonth } from '../../utils/util'
    // import { checkLoginName, checkPhone, checkEmail, checkObj, isEmpty, stringFormat } from '../../utils/util'

    import { getAction } from '@/utils/manage'

    export default {
        name: 'fileRecord',
        data() {
            return {
                dialogVisible: false,
                type_dia: 0,
                timeSelect: '全部',
                queryParam: {
                    name: '',
                    code: '',
                    startLogTime:'',
                    endLogTime:'',
                },
                departments: [
                    { value: "部门1", label: "部门1" },
                    { value: "部门2", label: "部门2" },
                    { value: "部门3", label: "部门3" }
                ],
                types: [
                    { value: "案卷类型1", label: "案卷类型1" },
                    { value: "案卷类型2", label: "案卷类型2" },
                    { value: "案卷类型3", label: "案卷类型3" }
                ],
                undertakers: [
                ],
                addForm: {
                    name: '',
                    code: '',
                    crimeTime: '',
                    address: '',
                    reason: '',
                    description: '',
                    department: "",
                    type: "",
                    level: "",
                    undertaker: "",
                    state: ""
                },
                stateList: [
                    { value: "0", label: "status1" },
                    { value: "1", label: "status2" },
                    { value: "2", label: "status3" }
                ],
                addRules: {
                    // trigger: 'blur'鼠标失去焦点时触发事件
                    name: [{ required: true, message: '请输入案卷名称', trigger: 'blur' }],
                    code: [{ required: true, message: '请选择案卷编号', trigger: 'blur' }],
                    // crimeTime: [{ required: true, message: '请选择案发时间', trigger: 'blur' }],
                    // address: [{ required: true, message: '请输入案发地点', trigger: 'blur' }],
                    // reason: [{ required: true, message: '请输入案发原由', trigger: 'blur' }],
                    // description: [{ required: true, message: '请输入案卷描述', trigger: 'blur' }],
                    // department: [{ required: true, message: '请选择办案部门', trigger: 'blur' }],
                    // type: [{ required: true, message: '请选择案卷类型', trigger: 'blur' }],
                    undertaker: [{ required: true, message: '请选择承办人', trigger: 'blur' }]
                },
                timeRange: [],
                timeShow: false,
                // tableData: {},
                tableData: [],
                pageNum: 1,
                pageSize: 10,
                pages: 0,
                total: 0,
                url: {
                    undertakerPage: '/auth/user/info/list',
                    page: '/aj/record',
                    update: '/aj/record/update/{0}',
                    delete: '/aj/record/delete/{0}',

                    // pageLog: '/sys/log',
                    // export: '/sys/log/export'
                }
            }
        },
        created() {
            this.queryTimeChanged(this.timeSelect)
            this.getDataList()
            this.getUndertakers()
        },
        computed: {
            typeText() {
                return this.type_dia === 2 ? '详情' : this.type_dia === 1 ? '修改' : ''
            }
        },

        methods: {
            getUndertakers(){
                this.$http.get(this.url.undertakerPage).then(data => {
                    // console.log(data)
                    this.undertakers = data.result
                    // console.log(this.undertakers)
                })
            },
            handleDetail(row) {
                this.addForm = JSON.parse(JSON.stringify(row))
                this.type_dia = 2
                this.dialogVisible = true
                if (!isEmpty(this.$refs.addForm)) {
                    this.$refs.addForm.resetFields()
                }
            },
            handleUpdate(row) {
                this.addForm = JSON.parse(JSON.stringify(row))
                this.type_dia = 1
                this.dialogVisible = true
                if (!isEmpty(this.$refs.addForm)) {
                    this.$refs.addForm.resetFields()
                }
            },
            handleDelete(row) {
                this.$confirm('确认删除?', '提示', { type: 'warning' })
                    .then(() => {
                        if (!isEmpty(row) && !isEmpty(row.id)) {
                            var url = stringFormat(this.url.delete, [row.id])
                            this.$http.delete(url).then(() => {
                                this.getDataList()
                            })
                        }
                    })
                    .catch(() => {})
            },
            queryTimeChanged(text) {
                let now = new Date()
                switch (text) {
                    case '今日':
                        this.timeShow = false
                        var startTime = getStartTimeOfDate(now)
                        var endTime = getEndTimeOfDate(now)
                        console.log('startTime=', startTime)
                        this.queryParam.startLogTime = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss')
                        this.queryParam.endLogTime = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss')
                        break
                    case '本周':
                        this.timeShow = false
                        var startTime = getStartTimeOfWeek(now)
                        var endTime = getEndTimeOfWeek(now)
                        this.queryParam.startLogTime = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss')
                        this.queryParam.endLogTime = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss')
                        break
                    case '本月':
                        this.timeShow = false
                        var startTime = getStartTimeOfMonth(now)
                        var endTime = getEndTimeOfMonth(now)
                        this.queryParam.startLogTime = formatDate(startTime, 'yyyy-MM-dd hh:mm:ss')
                        this.queryParam.endLogTime = formatDate(endTime, 'yyyy-MM-dd hh:mm:ss')
                        break
                    case '自定义':
                        this.timeShow = true
                        this.queryParam.startLogTime = ''
                        this.queryParam.endLogTime = ''
                        break
                    default:
                        this.timeShow = false
                        this.queryParam.startLogTime = ''
                        this.queryParam.endLogTime = ''
                        break
                }
            },
            handleTimeRangeChanged(text) {
                this.queryParam.startLogTime = text[0]
                this.queryParam.endLogTime = text[1]
            },
            // searchReset() {
            //     this.queryParam = { time: '全部', timeRange: {} }
            // },
            //
            updateConfirm(){
                this.$refs.addForm.validate(valid => {
                    if (valid) {
                        let _form = JSON.parse(JSON.stringify(this.addForm))
                            var address = stringFormat(this.url.update, [_form.id])
                            this.$http.put(address, _form).then(() => {
                                this.getDataList()
                            })
                        this.dialogVisible = false
                    } else {
                        return false
                    }
                })
            },
            getDataList() {
                let params = { _pageSize: this.pageSize, _pageNum: this.pageNum, ...this.queryParam }

                // console.log("111")
                // console.log(params)
                this.$http.get(this.url.page, {params}).then(data => {
                    // console.log(data)
                    let result = data.result
                    this.tableData = result.records
                    // console.log(this.tableData)
                    this.pageNum = result.current
                    this.pageSize = result.size
                    this.pages = result.pages
                    this.total = result.total
                })
            },
            handlePageChange(page) {
                this.pageNum = page
                this.getDataList()
            },
            handleSizeChange(size) {
                this.pageSize = size
                this.getDataList()
            }
        }
    }
</script>
